<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <PersonalItem>
            <div class="award">
                <div>{{$t('langs.Centers.integral.title')}}</div>
                <div>5000</div>
                <div>
                    <span @click="awardshow=true">{{$t('langs.Centers.integral.look')}}</span>
                </div>
                <div v-if="awardshow">
                    <ul>
                        <li>{{$t('langs.Centers.integral.li1')}}</li>
                        <li>{{$t('langs.Centers.integral.li2')}}</li>
                        <li>{{$t('langs.Centers.integral.li3')}} </li>
                        <li>{{$t('langs.Centers.integral.li4')}}</li>
                        <li>{{$t('langs.Centers.integral.li5')}}</li>
                    </ul>
                    <div>
                        <div>2018-05-45</div>
                        <div><img src="../assets/img/0FB.png" alt=""></div>
                        <div>
                            <p>Agfehf  sdasf</p>
                            <p>清新早春罩衫</p>
                        </div>
                        <div>1000积分</div>
                        <div>5000积分</div>
                    </div>
                    <i class="iconfont icon-xiangshang"></i>
                    <span @click="awardshow=false">{{$t('langs.Centers.integral.title1')}}</span>
                </div>
            </div>
        </PersonalItem>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'//头部导航
import PersonalItem from "@/components/PersonalItem.vue"
export default {
    components: {
        Tabcomponent,
        PersonalItem
    },
    data() {
        return {
            awardshow: false
        }
    },
}
</script>

<style lang='scss'>
.award {
    min-height: 557px;
    >div:nth-child(1) {
        font-size: 28px;
    }
    >div:nth-child(2) {
        width: 189px;
        height: 96px;
        line-height: 96px;
        font-size: 56px;
        background: #dddddd;
        text-align: center;
        margin: 15px 0 0 0;
    }
    >div:nth-child(3) {
        font-size: 14px;
        margin-top: 23px;
        cursor: pointer;
    }
    >div:nth-child(4) {
        width: 950px;
        background: #f3f3f3;
        padding-bottom: 126px;
        margin-top: 23px;
        position: relative;
        >ul {
            overflow: hidden;
            padding: 15px 0 22px 0;
            >li {
                float: left;
                line-height: 41px;
                font-size: 16px;
                padding-left: 17px;
                border-left: 1px solid #000;
            }
            >li:nth-child(1) {
                padding:0 47px 0 51px;
                border: none;
            }
            >li:nth-child(2) {
                width: 202px;
            }
            >li:nth-child(3) {
                 width: 179px;
            }
            >li:nth-child(4) {
                width: 164px;
            }
            >div:nth-child(5) {
                width: 183px;
            }
        }
        >div {
            overflow: hidden;
            padding: 10px 0;
            >div {
                float: left;
                font-size: 14px;
                text-align: center;
            }
            img { 
                width: 120px;
                height: 120px;
                vertical-align: top;
            }
            >div:nth-child(1) {
                width: 162px;
            }
            >div:nth-child(2) {
                width: 219px;
            }
            >div:nth-child(3) {
                width: 196px;
            }
            >div:nth-child(4) {
                width: 173px;
            }
            >div:nth-child(5) {
                width: 200px;
            }
        }
        >i {
            position: absolute;
            font-size: 28px;
            color: #f3f3f3;
            left: 35px;
            top: -18px;
        }
        >span {
            position: absolute;
            top: -40px;
            right: 0;
            font-size: 14px;
            cursor: pointer;
        }
    }
}
</style>